<template>
	<view class="content" @touchmove.stop.prevent="() => {}">
		<div class="my_work_box" id="myworkbox">
			<image src="/static/back.png" style="width: 24px;height: 24px;position: left;margin-left: 5%;"
				@click="backLayout()"></image>
			<div class="titlebox">
				<text style="color: black;font-size: 16px;">{{title}}</text>
			</div>
			<div style="position: right;margin-right: 13%"></div>
		</div>
		<scroll-view class="list_box" scroll-y="true" show-scrollbar="false">
			<div v-show="onImageDisplay" class="list_item" v-for="item in showList" @click="showDetail(item)">
				<image style="width: 60px;height: 60px;border-radius: 8px;margin: 13px 13px 10px 10px;"
					:src="'https://127.0.0.1'+item.src" @load="onImageLoad()" @error="onImageError()"></image>
				<div class="item_meg">
					<text style="font-weight: bold;margin-top: 3px;">{{item.name}}</text>
					<text v-if="showType=='department'"
						style="border-left: 4px solid #007aff;margin: 10px 0;padding-left: 5px;display: inline-block;line-height: 16px;">部门简介:</text>
					<text v-if="showType=='stu_union'"
						style="border-left: 4px solid #007aff;margin: 10px 0;padding-left: 5px;display: inline-block;line-height: 16px;">组织简介:</text>
					<text v-if="showType=='college'"
						style="border-left: 4px solid #007aff;margin: 10px 0;padding-left: 5px;display: inline-block;line-height: 16px;">社团简介:</text>
					<text
						style="color: grey;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-break: break-all;font-size: 14px;">{{item.intro}}</text>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.title = options.title;
			if (this.title == '学校部门') {
				this.showType = 'department'
			} else if (this.title == '学生组织') {
				this.showType = 'stu_union'
			} else if (this.title == '社团组织') {
				this.showType = 'college'
			}
			this.getencyclopedia()
		},
		data() {
			return {
				showType: '',
				title: '',
				showList: [],
				onImageLoadCount: 0,
				onImageSuccessCount: 0,
				onImageDisplay: false,
			}
		},
		methods: {
			getencyclopedia() {
				this.onImageDisplay = false
				uni.request({
					url: 'https://127.0.0.1/data/getencyclopedia_' + this.showType + '.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						console.log(res)
						this.showList = res.data.data
						this.onImageSuccessCount = res.data.total
						console.log(this.showList)
						uni.showLoading({
							title: '加载中'
						})
					}
				})
			},
			backLayout() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.redirectTo({
						url: '/pages/index/home'
					});
				}
			},
			showDetail(item) {
				uni.navigateTo({
					url: `/pages/encyclopedia/encyclopediaDetail?encyclopediaData=${encodeURIComponent(JSON.stringify(item))}`
				});
			},
			onImageLoad() {
				this.onImageLoadCount += 1
				if (this.onImageLoadCount >= this.onImageSuccessCount) {
						uni.hideLoading()
						this.onImageDisplay = true
						this.onImageLoadCount = 0
				}
			},
			onImageError() {
				uni.hideLoading()
				this.onImageDisplay = true
				this.onImageLoadCount = 0
				uni.showToast({
					title: '加载失败',
					icon: 'error',
					duration: 2000
				})
			},
		}
	}
</script>

<style>
	template {
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		overflow: hidden;
	}

	.content {
		overflow: hidden;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		background-color: #f8f8f8;
	}

	.titlebox {
		top: 0;
		position: relative;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		letter-spacing: 1px;
		margin: 0 auto;
	}

	.my_work_box {
		margin: 13% 0 4% 0;
		display: flex;
		flex-direction: row;
		align-items: left;
		overflow: hidden;
	}

	.list_box {
		height: calc(100vh - 130px);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		align-items: center;
	}

	.list_item {
		display: flex;
		flex-direction: row;
		border-radius: 16px;
		background-color: white;
		margin: 10px auto;
		width: 95%;
		height: 230rpx;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}

	.item_meg {
		margin: 10px 0;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		flex: 1;
	}
</style>